<template>
	<view class="page-container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<template #backText><text class="text-black">返回</text></template>
			<template #content><text class="text-black text-bold">设置</text></template>
		</cu-custom>

		<view class="list-group">
			<view class="cu-list menu">
				
				<view class="cu-item arrow" @click="navigateToAccount">
					<view class="content">
						<text>账号与安全</text>
					</view>
				</view>
			</view>
		</view>

		<view class="list-group">
			<view class="cu-list menu">
				<view class="cu-item arrow">
					<view class="content">
						<text>支付设置</text>
					</view>
					<view class="action">
						<text class="text-sm text-gray">先享后付、免密支付等</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text>安全中心</text>
					</view>
                    <view class="action">
						<text class="text-sm text-gray">安全问题解决与咨询</text>
					</view>
				</view>
			</view>
		</view>
        
        <view class="list-group">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text>长辈模式</text>
					</view>
                    <view class="action">
						<switch class="switch" @change="switchChange"></switch>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-xl logout-section">
			<button class="cu-btn block bg-white lg" @click="handleLogout">退出当前账号</button>
		</view>
	</view>
</template>

<script setup>
const navigateToAccount = () => {
    uni.navigateTo({
        url: '/pages/setting/account'
    });
};

const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.removeStorageSync('token');
				uni.removeStorageSync('user');
				uni.removeStorageSync('loginTime');

				uni.showToast({
					title: '已退出登录',
					icon: 'none',
					duration: 1500
				});

				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/profile'
					});
				}, 1500);
			}
		}
	});
};

const switchChange = (e) => {
    console.log('长辈模式切换:', e.detail.value)
}
</script>

<style scoped>
.page-container {
	background-color: #f5f5f5;
	min-height: 100vh;
    padding-bottom: 160rpx;
}
.text-black {
    color: #000000;
}
.list-group {
    margin-top: 20rpx;
}
.logout-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    padding-bottom: 40rpx;
}
.cu-btn.bg-white {
    color: #e54d42;
}
.cu-list.menu>.cu-item.arrow:after {
    color: #cccccc;
}
</style> 